<template>
  <Card v-style="'boxstyle_bg_1'">
    <div class="data">
      <a-list class="mt_10" :grid="{ gutter: 16, column: 5 }" :data-source="statisticsData">
        <template #renderItem="{ item }">
          <a-list-item>
            <div
              style="
                background: rgba(255, 255, 255, 0.05);
                border: 1px solid #1f2327;
                border-radius: 10px;
                padding: 10px 10px 5px;
                height: 100%;
              "
            >
              <a-statistic :value="item.value">
                <template #title>
                  <p>{{ item.title }}</p>
                  <img :src="item.icon" alt="" />
                </template>
              </a-statistic>
            </div>
          </a-list-item>
        </template>
      </a-list>

      <!-- <img class="map" src="@/assets/assetRenewal/map.png" alt="" /> -->
      <div id="mapBox" ref="mapBox"></div>
    </div>
  </Card>
</template>

<script lang="ts" setup>
import { ref, onMounted, toRefs, defineProps, watch } from "vue";
import Card from "@/components/Card";
import * as echarts from "echarts";
import "echarts-gl"; 
import '../../../../node_modules/echarts/map/js/world.js';
import worldMap from "../../../../node_modules/echarts/map/json/world.json";
import { bigDataApi } from "@/api/bigData";
import store from "@/store";
// interface DataItem {
//   title: string;
//   value: string;
//   icon: any;
// }
const statisticsData = ref([
  {
    title: "新增站点数量",
    value: "0",
    icon: require("@/assets/assetRenewal/icon1.png"),
  },
  {
    title: "新增站长数量",
    value: "0",
    icon: require("@/assets/assetRenewal/icon2.png"),
  },
  {
    title: "新增邮箱数量",
    value: "0",
    icon: require("@/assets/assetRenewal/icon3.png"),
  },
  {
    title: "全网预估流量总和",
    value: "0",
    icon: require("@/assets/assetRenewal/icon4.png"),
  },
  {
    title: "全网站点数量",
    value: "0",
    icon: require("@/assets/assetRenewal/icon5.png"),
  },
]);

const mapBox = ref();

let date = 'day';
const props = defineProps({
  selectdate:{
    type: String,
    default: 'day'
  }
})
const { selectdate } = toRefs(props);

console.log(props)

watch(
  selectdate,
  (e) => {
    // console.log(e)
    date = e;
    getStatistics();
  },
  {
    immediate: true,
  }
);



onMounted(() => {
  // 获取统计信息
  // getStatistics()
  // 初始化图表
  setEcharts();
});

async function getStatistics() {
  const result = await bigDataApi.statistics({
    token: store.getters.user.token,
    date: date
  });
  const { data } = result;
  statisticsData.value[0].value = data.new_site_count
  statisticsData.value[1].value = data.new_station_count
  statisticsData.value[2].value = data.new_email_count
  statisticsData.value[3].value = data.estimate_flow1_count
  statisticsData.value[4].value = data.all_site_count
}

function setEcharts() {
  echarts.registerMap("world", { geoJSON: worldMap });
  var myChart = echarts.init(mapBox.value);
  var option = {
    // dataRange: {
    //   show: true,
    //   min: 0,
    //   max: 1000000,
    //   text: ['High', 'Low'],
    //   realtime: true,
    //   calculable: true,
    //   color: ['#7CF9D0', '#7CC0FE', '#DEF6FF']
    // },
    tooltip: {
      trigger: 'item'
    },
    geo: {
      map: 'world',
      label: {
        emphasis: {
          show: false
        }
      },
      roam: false,
      silent: true,
      itemStyle: {
        normal: {
          areaColor: '#323c48',
          borderColor: '#000'
        },
        emphasis: {
          areaColor: '#ece68d'
        }
      }
    },
    series: [{
      name: '资产更新',
      type: 'map',
      mapType: 'world',
      itemStyle: {
        normal: {
          borderWidth: 0.5,
          borderColor: '#A9A9A9',
          areaColor: '#323c48',
        },
        emphasis: {
          areaColor: '#ece68d',
          borderColor: '#fff',
          borderWidth: 0
        }
      },
      // mapLocation: {
      //   y: 100
      // },
      data: [{
        name: 'Afghanistan',
        value: 28397.812
      },
        {
          name: 'Angola',
          value: 19549.124
        },
        {
          name: 'Albania',
          value: 3150.143
        },
        {
          name: 'United Arab Emirates',
          value: 8441.537
        },
        {
          name: 'Yemen',
          value: 22763.008
        },
        {
          name: 'South Africa',
          value: 51452.352
        },
        {
          name: 'Zambia',
          value: 13216.985
        },
        {
          name: 'Zimbabwe',
          value: 13076.978
        }
      ],
      symbolSize: 12,
      label: {
        normal: {
          show: false
        },
        emphasis: {
          show: false
        }
      }
    }]
  }
  myChart.setOption(option);
}

</script>

<style lang="less" scoped>
.data {
  height: 100%;
  overflow-y: auto;
  /deep/ .ant-statistic-title {
    color: #fff;
    font-size: 12px;
    display: flex;
    p{
      margin-right: 5px;
    }
    img{
      width: 24px;
      height: 24px;
      flex-shrink: 0;
    }
  }
  /deep/ .ant-statistic-content {
    color: #fff;
    font-size: 24px;
  }
  /deep/ .ant-list-grid .ant-col > .ant-list-item {
    margin-bottom: 0;
  }
  /deep/ .ant-col {
    height: 100%;
  }
  /deep/ .ant-list-item {
    height: 100%;
  }

  .map{
    width: 100%;
    margin-top: 20px;
  }
  #mapBox{
    width: 100%;
    height: 80%;
    margin-top: 20px;
  }
}
</style>
